<template>
  <div :class="'van-after-border '+item.class">
    <van-field v-model="item.text" readonly clickable :name="item.key" :required="item.disabled ? false : item.required" :placeholder="placeholder" :data-rule="item.key" :error-message="errMsg" @click="_click">
      <template #label>
        <span class="custom-title">{{ label }}
          <van-icon v-if="help" name="question" @click="showHelp" />
        </span>
      </template>
      <template #right-icon>
        <div class="iconfont">
          &#xe67f;
        </div>
      </template>
    </van-field>
    <van-popup v-model="showPicker" position="bottom" class="popupcss">
      <van-nav-bar title="部门选择" left-text="" right-text="确定" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
      <department-tree ref="child" @AgreeSelected="_AgreeSelected" />
    </van-popup>
  </div>
</template>

<script>
import EleBase from './EleBase'
export default {
  name: 'EleDepartment',
  components: {
    DepartmentTree: require('@/components/common/department/index').default
  },
  extends: EleBase,
  props: {
    item: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      showPicker: false,
      list: []
    }
  },
  computed: {
    columns: function() {
      const columns = this.initValue
      return columns.map(function(option) {
        return option.label
      })
    },
    errMsg() {
      let str = ''
      if (this.$validate.isNull(this.item.value) && this.item.required) {
        if (this.item.undermsg === '') {
          str = '请选择' + this.item.label
        } else {
          str = this.item.undermsg
        }
      }
      return str
    },
    placeholder() {
      let str = ''
      if (this.item.placeholder) {
        str = this.item.placeholder
      } else if (this.item.label) {
        str = '请选择' + this.item.label
      }
      return str
    }
  },
  methods: {
    _click() {
      if (this.disabled || this.readonly) {
        this.showReadonlyTip()
        return
      }
      debugger
      if (this.$refs.child !== undefined) {
        this.$refs.child.initLoading() // 初始化组件的数据
      }
      // this.$refs.child.$emit('childmethod') // 子组件$on中的名字
      this.showPicker = true
    },
    onClickLeft() {
      this.showPicker = false
    },
    onClickRight() {
      this.onClickLeft()
    },
    _AgreeSelected(o) {
      this.item.value = o.value1.deptid
      this.item.text = o.value2.map((option) => option.content).join('/')
      this.onClickLeft()
    }

  }

}
</script>

<style >
  .popupcss {
    width: 100%;
    height: 100%;
    background: #fafafa;
  }
</style>
